iT邦幫忙

2022 iThome 鐵人賽

DAY 30
0
Modern Web

想轉職的鯊魚從零基礎開始學習JavaScript系列 第 30

想轉職的鯊魚從零基礎開始學習JavaScript Day-30 資料驗證

  • 分享至 

  • xImage
  •  

前言

身為一個程式開發人員,會很明白自己的函式需要輸入什東西,但是程式還是會與使用者做交流,而使用者的範圍真的很廣,有些會依照指示操作,有些則是猴子胡亂使用,所以就需要驗證使用者輸入的東西,並適時回應錯誤,下面鯊魚分享一些自己研究的簡易資料驗證方式,好去面對一些胡亂輸入的猴子。

沒有輸入就送出了

這邊一律會使用input來表示輸入的值,而且是一個字串
這時會收到一個空字串"",而空字串的驗證方式是

input.length === 0

如果是用if條件句

!(input.length)

就能抓出沒有輸入的input

只輸入空格就送出了

這時input就不是一個空字串了,但是由於前後都是空格
所以可以用字串的trim來字串的空格去除
如果去除空格之後是空字串,就可以用空字串的方式來處理

input.trim().length === 0
!input.trim().length

由求數字卻輸入文字

input是一個字串,如果是由數字組成的字串可以透過Number(input)使其轉換成數字
如果是無法轉換,就會回報NaN,所以就用NaN傳用的漸驗法isNaN()

isNaN(Number(input))

輸入非10進位的數字

這點就很微妙了,要看開發者要不要去除
比較簡易的作法就是將
input轉成數字在轉回字串
檢查否與原本的相同
如果是非10進位的,經過轉換之後會跟原本的字串不同

input !== String(Number(input))

但是就有一個小小的問題,就是0開頭的數字也會被歸類在這邊

還記得其他進位會有一個特有的開頭嗎?

16進位是0x

8進位是0o

2進位是0b

所以會建議使用String.prototype.startsWith( searchString [ , position ] )

input.startsWith("0x") // 16進位
input.startsWith("0o") // 8進位
input.startsWith("0b") // 2進位

輸入數字0

沒什麼好說明的,就是等於0

Number(input) === 0
!Number(input)

輸入負數

輸入值經過絕對值轉換之後Math.abs()與原本的輸入值不同即是負數

Number(input) !== Math.abs(Number(input))

2022.11.01補充
其實更簡單的是

Number(input) > 0

輸入小數

Number.isInteger()可以檢驗整數,一但是小數就會回傳false,所以要再前面家一個!使其轉換成true好運用在條件句上

!Number.isInteger(Number(input))

結語,但是未完待續

鐵人賽到今天就結束了,但是鯊魚的旅程是不會停止,如果有學到新的東西還是會不斷的更新,鯊魚會一直學習成長,bilibili的up主楊顏同學曾說過,

成長是一個過於慘痛的詞彙,意味著挫折和教訓,意味著認真過後的失去。

或許未來鯊魚在成長的過程中,會不斷的遭遇挫折與失敗,或許會失落失意,或許會在大雨中哭泣,但是鯊魚相信,沒有解決不了的問題,沒有過不了的難關,只有不夠多的鯊魚,祈願迎目前的你跟鯊魚一樣可以順利的渡過層層難關,一起加油,一起努力前行吧!

鯊語錄-終結


上一篇
想轉職的鯊魚從零基礎開始學習JavaScript Day-29 Function- Method definitions & getter & setter 物件內的函式 與 get & set
下一篇
想轉職的鯊魚從零基礎開始學習JavaScript Day-31 API 與 Airtable 運用
系列文
想轉職的鯊魚從零基礎開始學習JavaScript31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言